<template>
  <view class="">
    <!-- 表格模板 -->
    <view class="info-content">
      <view class="info-main">
        <form @submit="formSubmit" @reset="formReset">
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">日期</view>
              <view class="item-content-input">
                <view class="uni-input">{{ date }}</view>
              </view>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">时间</view>
              <view class="item-content-input">
                <view class="uni-input">{{ time }}</view>
              </view>
            </view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">姓名</view>
              <view class="item-content-input">
                <input class="uni-input" name="name" placeholder="输入姓名" />
              </view>
            </view>
          </view>
          <view class="min" v-show="showName">请正确输入姓名</view>
          <view class="uni-form-item uni-column">
            <view class="item-content">
              <view class="title item-content-title">住址</view>
              <view class="item-content-input">
                <view class="uni-input">{{ address }}</view>
              </view>
            </view>
          </view>

          <view class="uni-form-item uni-column">
            <view class="title title2">报修类型</view>
            <!-- <radio-group name="gender">
              <label>
                <radio
                  style="transform: scale(0.7)"
                  color="#20b1ff"
                  value="水管"
                />
                <text>水管</text>
              </label>
              <label>
                <radio
                  style="transform: scale(0.7)"
                  color="#20b1ff"
                  value="燃气"
                />
                <text>女</text>
              </label>
            </radio-group> -->
            <checkbox-group name="checkbox">
              <label>
                <checkbox
                  value="水管"
                  checked="true"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />水管
              </label>
              <label>
                <checkbox
                  value="煤气"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />煤气
              </label>
              <label>
                <checkbox
                  value="电路"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />电路
              </label>
              <label>
                <checkbox
                  value="其他"
                  color="#20b1ff"
                  style="transform: scale(0.7)"
                />其他
              </label>
            </checkbox-group>
          </view>
          <view class="min" v-show="showGender">请选择类型</view>
          <view class="uni-form-item uni-column">
            <view class="title title2">电话</view>
            <input
              class="uni-input"
              name="phoneNumber"
              placeholder="输入电话"
            />
          </view>
          <view class="min" v-show="showPhone">请正确输入电话号码</view>
          <view class="uni-form-item uni-column">
            <view class="title title2">住址</view>
            <input
              class="uni-input"
              name="address"
              placeholder="例:六号楼一栋628"
            />
          </view>
          <view class="uni-form-item uni-column">
            <view class="title title2">补充信息</view>
            <view class="uni-textarea1">
              <textarea
                class="uni-width"
                placeholder-style="color:#666"
                placeholder="在此输入"
                name="label"
              />
            </view>
          </view>
          <view class="min" v-show="showAddress">请正确输入地址</view>
          <view class="uni-btn-v">
            <button plain="true" form-type="submit">立即验证</button>

            <!-- <button type="default" form-type="reset">Reset</button> -->
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      msg: "Welcome to your vueName",
    };
  },
  onShow() {
    this.dataIndex = 1;
    this.dataIndexOne = 4;
    let getTime = new Date();
    this.time = `${this.appendZero(getTime.getHours())}:${this.appendZero(
      getTime.getMinutes()
    )}`;
    this.date = `${getTime.getFullYear()}-${this.appendZero(
      getTime.getMonth() + 1
    )}-${this.appendZero(getTime.getDate())}`;

    console.log(this.time);

    // console.log(num + "5555");
  },
  methods: {
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    formSubmit(e) {
      console.log(
        "form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value)
      );
      let formdata = e.detail.value;
      console.log(formdata);
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";

.info-content {
  // box-sizing: border-box;
  // padding: 0 15rpx;

  margin: 0 15rpx;
  // border-radius: 2%;
  // background-color: $uni-color-mainBg;
  // margin-bottom: 50rpx;
  .info-main {
    padding: 0 15rpx;
    background-color: $uni-color-mainBg;
    box-sizing: border-box;
    .uni-column {
      border-bottom: 1rpx solid #d8d8de;
      padding: 12rpx 0;
      .title {
        // font-size: 55rpx;
        font-size: 30rpx;
        padding: 0 0 15rpx 0;
      }
      .item-content {
        display: flex;
        align-items: center;
        .title {
          // font-size: 55rpx;
          font-size: 30rpx;
          padding: 20rpx 0;
        }

        .item-content-input {
          padding-left: 80rpx;
          .uni-input {
            // padding-left: 40rpx;
            font-size: 30rpx;
            color: #c0c0c0;
          }
        }
      }

      // .title {
      //   padding: 30rpx 0;
      // }
    }
    .uni-btn-v {
      padding: 50rpx 0 20rpx 0;
      // border-top: 0 20rpx solid;
      button {
        width: 50%;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: #fff;
        // size: 10;
        height: 70rpx;
        @include center;
        background-color: $uni-color-primary;
        border: none;
      }
    }
  }
  .info-step {
    // margin-top: 20%;
    width: 100%;
    padding: 30rpx 0;
    box-sizing: border-box;
    // marggn-top: 100rpx;
    // background-color: $uni-color-mainBg;
    .uni-steps {
      // height: 200rpx;
      background-color: $uni-color-mainBg;
      active-color: $uni-color-primary;
      // transform: scale(1.1);
      padding: 60rpx 0;

      box-sizing: border-box;
      // @include center;
      // font-size:80rpx;
    }
  }
  .info-step-test {
    background-color: $uni-color-mainBg;
    padding: 0 0 20rpx 0;
    @include center;
    color: $uni-color-warning;
  }
}
.uni-width {
  // width: 95%;
  width: 100% !important;
  font-size: 30rpx;
  height: 120px;
  // padding: 10rpx 15rpx;
}
.uni-textarea1 {
  margin: 0 auto;
  // box-sizing: border-box;
  border-radius: 2%;
  background-color: $uni-bg-color-hover;
  padding: 10rpx 15rpx;
  font-size: 12rpx;
  height: 120px;
}
</style>
